<template>
	<view class="sign_page" v-cloak>
		<view class="sign_body">
			<view class="cover">
				<view class="cover_text"
					:style="'transform: rotate( '+ rotate + 'deg);text-shadow: 10rpx 10rpx 5rpx ' + font_color+ ';'">
					{{uname}}</view>
			</view>
			<canvas class="sign_canvas" disable-scroll="true" canvas-id="handWriting"
				@touchstart.stop="handWritingStart" @touchmove.stop="handWritingMove"
				@touchend.stop="handWritingEnd"></canvas>
		</view>
		<view class="sign_footer">
			<view class="btn" @click="retDraw">取消</view>
			<view class="btn" @click="exportImg">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from './index.js'
	export default {
		name: 'sign', //签名
		props: {
			uname: {
				type: String,
				default: ''
			},
			bgImg: { //https://alifei04.cfp.cn/creative/vcg/veer/1600water/veer-303195393.jpg
				type: String,
				default: ''
			},
			font_color: {
				type: String,
				default: 'pink'
			},
			rotate: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				canvasW: 375, //canvas宽度
				canvasH: 440, //canvas高度
				ctx: null, //canvas
				lineWidth: 2, //线宽 建议1~5
				x0: 0, //初始横坐标或上一段touchmove事件中触摸点的横坐标
				y0: 0, //初始纵坐标或上一段touchmove事件中触摸点的纵坐标
				canClick: true, //旗帜
				flag: false, //签名旗帜
				on: false, //进来的人口
			}
		},
		async created() {
			this.ctx = uni.createCanvasContext('handWriting', this)
			this.drawbg()
			this.ctx.setLineCap('round')
			this.ctx.fillStyle = '#000000'
			this.ctx.font="0"
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.sign_body').boundingClientRect(data => {
				this.canvasW = data.width
				this.canvasH = data.height
			}).exec();
		},
		methods: {
			async drawbg() {
				function getImagePath(img) { //获取图片
					return new Promise((resolve, reject) => {
						uni.getImageInfo({
							src: img,
							success: (res) => {
								resolve(res.path)
							},
							fail: () => {
								resolve(null)
							}
						})
					})
				}
				let bg = await getImagePath(this.bgImg)
				this.ctx.drawImage(bg, -50, -50, 500, 900);
				this.ctx.draw()
			},
			retDraw() { //取消按钮事件
				this.flag = false
				this.ctx.clearRect(0, 0, this.canvasW, this.canvasH)
				this.ctx.draw()
			},
			async exportImg() { //确认按钮事件
				let seif = this
				if (!seif.flag) {
					uni.showToast({
						title: '请签名后再点击确定',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (!seif.canClick) return
				seif.canClick = false
				let tempFile = await seif.saveCanvas()
				// let base64 = await pathToBase64(tempFile)

				uni.$emit('getSignImg', {
					tempFile
				}); //向上一页传递图片base64数据
				uni.navigateBack()
				// 上一页使用uni.$on获取签名图片
				// uni.$on('getSignImg', ({base64}) => {
				// 	console.log(base64)
				// });
			},
			handWritingEnd(event) { //签名抬起事件
				console.log(event, 'handWritingEnd')
				this.x0 = 0
				this.y0 = 0
			},
			handWritingMove(e) { //签名滑动事件
				// #ifdef MP-WEIXIN
				let dx = e.touches[0].clientX - this.x0
				let dy = e.touches[0].clientY - this.y0
				// #endif
				// #ifdef APP-PLUS
				let dx = e.touches[0].x - this.x0
				let dy = e.touches[0].y - this.y0
				// #endif
				this.ctx.moveTo(this.x0, this.y0)
				this.ctx.lineTo(this.x0 + dx, this.y0 + dy)
				this.ctx.setLineWidth(this.lineWidth)
				this.ctx.stroke()
				this.ctx.draw(true)
				// #ifdef MP-WEIXIN
				this.x0 = e.touches[0].clientX
				this.y0 = e.touches[0].clientY
				// #endif
				// #ifdef APP-PLUS
				this.x0 = e.touches[0].x
				this.y0 = e.touches[0].y
				// #endif
			},
			handWritingStart(e) { //签名按下事件 app获取的e不一样区分小程序app
				this.flag = true
				// #ifdef MP-WEIXIN
				this.x0 = e.touches[0].clientX
				this.y0 = e.touches[0].clientY
				// #endif
				// #ifdef APP-PLUS
				this.x0 = e.touches[0].x
				this.y0 = e.touches[0].y
				// #endif
			},
			async saveCanvas() { //绘画的图片
				return await new Promise((resolve, reject) => {
					uni.canvasToTempFilePath({
						canvasId: 'handWriting',
						success: (res) => {
							console.log(res.tempFilePath)
							if (!res.tempFilePath) {
								uni.showModal({
									title: '提示',
									content: '保存签名失败',
									showCancel: false
								})
								return
							}
							resolve(res.tempFilePath)
						},
						fail: (r) => {
							console.log('图片生成失败：' + r)
							resolve(false)
						}
					}, this)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	[v-cloak] {
		display: none;
	}

	.sign_page {
		height: 100vh;
		width: 100vw;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.sign_footer {
			flex-shrink: 0;
			padding: 40rpx 30rpx 50rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 300rpx;
				height: 80rpx;
				background: #0eb543;
				border-radius: 30rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;

				&:nth-child(1) {
					background-color: #c3c3c3;
					color: #000000;
				}
			}
		}

		.sign_body {
			width: 100%;
			flex-grow: 1;
			background: #FAFAFA;

			.sign_canvas {
				width: 100%;
				height: 100%;
			}
		}

		.cover {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 170rpx;
			right: 0;
			// background-color: pink;
			display: flex;
			align-items: center;
			justify-content: center;

			.cover_text {
				width: 200rpx;
				opacity: .5;
				font-size: 500rpx;
				word-wrap: break-word;
				color: #fff;
			}
		}
	}
</style>
